<template>
  <div class="main">
    <div class="header">
      <div class="logoWrap">
        <i class="if-font-home"></i>
        <div class="name">云端数据平台</div>
      </div>
      <div class="title">
        <span style="display: inline-flex; align-items: center;">
          {{ unitName }}
        </span>
      </div>
      <!--{{orgName}}-->
      <div class="expand">
        <el-dropdown size="large">
          <div class="userName">
            <i class="if-font-UserAvatarFilledAlt"></i>{{ userName }}
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="onEditPwd"><i class="if-font-LockOutlined"></i>修改密码</el-dropdown-item>
              <el-dropdown-item divided @click="onLogout"><i class="if-font-ExitToAppOutlined"></i>退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="container">
      <div class="sidebar" v-show="showSidebar">
        <el-scrollbar>
          <ul>
            <li v-for="item in menus" :key="item.name" :class="[
              !item.sub || !item.sub.length ? 'menuItem' : 'menuTitle',
              { current: currentMenu === item.code },
            ]">
              <template v-if="!item.sub || !item.sub.length">
                <div class="text" @click="goMenu(item)">
                  <span class="menuText" :class="{ clickable: true }">
                    <template v-if="item.iconType === 'ep'">
                      <el-icon :size="19">
                        <component :is="item.icon" />
                      </el-icon>
                    </template>
                    <template v-else>
                      <i :class="['if-font-' + item.icon]"></i>
                    </template>
                    {{ item.title }}
                  </span>
                </div>
              </template>
              <template v-else>
                <div class="text menuTitleClickable" @click="toggleMenu(item.code)">
                  <template v-if="item.iconType === 'ep'">
                    <el-icon :size="19">
                      <component :is="item.icon" />
                    </el-icon>
                  </template>
                  <template v-else>
                    <i :class="['if-font-' + item.icon]"></i>
                  </template>
                  {{ item.title }}
                  <span class="arrow"
                    :class="{ expanded: (expandedMenus[item.code] !== undefined ? expandedMenus[item.code] : item.active) }"
                    style="margin-right:10px;">
                    <svg width="12" height="12" viewBox="0 0 1024 1024">
                      <path
                        d="M512 672c-8.2 0-16.4-3.1-22.6-9.4L201.4 374.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L512 594.7l265.4-265.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L534.6 662.6c-6.2 6.2-14.4 9.4-22.6 9.4z" />
                    </svg>
                  </span>
                </div>
                <ul class="innerMenu"
                  v-show="expandedMenus[item.code] !== undefined ? expandedMenus[item.code] : item.active">
                  <li v-for="innerItem in item.sub" :key="innerItem.code" :class="[
                    'menuItem',
                    { current: currentMenu === innerItem.code },
                  ]">
                    <router-link :to="{ path: innerItem.path }" class="menuText">
                      <template v-if="innerItem.iconType === 'ep'">
                        <el-icon :size="19">
                          <component :is="innerItem.icon" />
                        </el-icon>
                      </template>
                      <template v-else>
                        <i :class="['if-font-' + innerItem.icon]"></i>
                      </template>
                      {{ innerItem.title }}
                    </router-link>
                  </li>
                </ul>
              </template>
            </li>
          </ul>
        </el-scrollbar>
      </div>
      <div class="sidePane" :class="{ 'sidePane--full': !showSidebar }">

        <router-view v-slot="{ Component }">

          <keep-alive :include="cachedNames">
            <component :is="Component" />
          </keep-alive>

        </router-view>

      </div>

    </div> 
  </div>
</template>

<script setup>
// 菜单点击跳转
const goMenu = (item) => {
  if (item.path) {
    router.push({ path: item.path });
  }
}; 

import { ref,inject } from "vue";

import { useRouter } from "vue-router";

import { ElMessageBox } from "element-plus";

import { onMounted, watch, computed } from "vue";

import { storage } from '@/utils/storage.js';

const router = useRouter();
  
const cachedNames = inject('cachedNames') 


watch(cachedNames, () => console.log('cachedNames =', cachedNames.value), { immediate: true })

// 控制侧边栏显示/隐藏
const showSidebar = ref(true);

let menus = ref([]);
let userName = ref("");
let unitName = ref("");
let currentMenu = ref("");

let roleCodes = ref(storage.get("be-roleCodes"));

const editPwdDialog = ref();
// 新增：记录展开的菜单项
const expandedMenus = ref({});

// 在 onMounted 中初始化菜单的展开状态
onMounted(() => {  
  userName.value = storage.get("be-user");
  unitName.value = storage.get("be-unitName");
  menus.value = storage.get("be-menus");

  if (!menus.value || !menus.value.length || !userName.value) {
    router.push("/login");
  } else {
    // 初始化所有含子菜单的菜单项展开状态为 false
    menus.value.forEach(item => {
      if (item.sub && item.sub.length) {
        expandedMenus.value[item.code] = item.active || false;
      }
    });
  }
});

// 更新 toggleMenu 函数，简单取反
const toggleMenu = (code) => {
  expandedMenus.value[code] = !expandedMenus.value[code];
};

watch(
  () => router.currentRoute.value,
  (val) => {
    //
    if (val.meta.upper) {
      currentMenu.value = val.meta.upper;
    } else if (val.name) {
      currentMenu.value = val.name;
    } else {
      currentMenu.value = "home";
    }
  },
  {
    deep: true,
    immediate: true,
  },
);

const onEditPwd = () => {
  editPwdDialog.value.openDialog();
};

const onLogout = () => {

  ElMessageBox.confirm(`确认退出登录吗`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {

      storage.clear();

      //退出到登录页
      router.push("/login");
    })
    .catch(() => {
      //
    });
};
</script>

<!-- 合并 index.vue 中原有的样式与 @/assets/base.scss 样式 -->
<style>
/* 统一基础配色 */
:root {
  --header-bg-color: #1a73e8;
  /* header 背景 */
  --sidebar-bg-color: #f1f3f4;
  /* sidebar 背景 */
  --main-bg-color: #f1f3f4;
  /* 内容区背景 */
  --menu-active-bg: #4285f4;
  /* 菜单激活项背景 */
  --text-color: #5f6368;
  /* 通用文字颜色 */
}

/* Header 样式合并 */
.header {
  height: 50px;
  line-height: 50px;
  background-color: var(--header-bg-color);
  color: #fff;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid #e3e8ee;
  position: fixed;
  z-index: 5;
  min-width: 1024px;
}

.header .logoWrap {
  position: absolute;
  left: 20px;
  top: 0;
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

.header .logoWrap i {
  margin-right: 8px;
  font-size: 26px;
}

.header .expand {
  position: absolute;
  right: 20px;
  top: 12px;
}

.header .expand .userName {
  cursor: pointer;
  font-size: 14px;
  color: #fff;
}

/* Sidebar 样式合并 */
.sidebar {
  background-color: var(--sidebar-bg-color);
  position: fixed;
  top: 50px;
  left: 0;
  bottom: 0;
  width: 210px;
  border-right: 1px solid #e3e8ee;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.03);
  font-size: 14px;
  color: #222;
  z-index: 10;
}

.sidebar .el-scrollbar {
  height: 100%;
}

.sidebar ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar li {
  line-height: 48px;
  transition: background 0.2s;
}

.sidebar li .text {
  padding-left: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #222;
  border-left: 3px solid transparent;
}

.sidebar li .text i {
  font-size: 19px;
  margin-right: 5px;
}

.sidebar li .text .arrow {
  display: inline-block;
  transition: transform 0.2s;
  margin-left: auto;
  color: #b0b0b0;
}

.sidebar li .text .arrow.expanded {
  transform: rotate(180deg);
}

.sidebar li.menuTitle {
  border-radius: 6px 6px 0 0;
  margin-bottom: 2px;
}

.sidebar li .innerMenu {
  border-radius: 0 0 6px 6px;
  margin: 0 8px 6px 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.sidebar li .menuItem .menuText {
  padding-left: 38px;
  color: #222;
  display: flex;
  text-decoration: none;
  align-items: center;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}

.sidebar li .menuItem:hover .menuText {
  color: #1976d2;
  background: #e3f0fd;
}

.sidebar li .menuItem.current .menuText {
  background-color: #0089ff1a;
}

/* 主体与布局样式 */
.main {
  min-width: 1024px;
  background: linear-gradient(135deg, #f8fbff 0%, #eaf1fa 100%);
  min-height: 100vh;
}

.container {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}

.content-wrapper {
  flex: 1;
  padding: 20px;
  background-color: var(--main-bg-color);
  color: var(--text-color);
}

/* 菜单项样式 */
.menu-item {
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.menu-item.current {
  background-color: var(--menu-active-bg);
  color: #ffffff;
}

/* 更新 .sidePane 样式 */
.sidePane {
  flex: 1;
  transition: all 0.3s ease;
}
</style>

<style scoped>
/* 新增：针对 .sidePane 的边距调整，确保右侧内容不会被左侧固定菜单遮挡 */
.sidePane {
  margin-left: 210px;
  width: calc(100% - 210px);
  transition: margin 0.3s ease;
  flex: none;
}

.sidePane.sidePane--full {
  margin-left: 0;
  width: 100%;
}
</style>